<template>
    <div>
        <div class="crumbs">
            <div class="contentbox">
                <div class="contentsize">租金收缴</div>
                <div>
                    <!-- <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button> -->
                    <el-button @click="cacelsubmitForm('ruleForm')">返回</el-button>
                </div>
            </div>
        </div>
        <div class="container">
            <div>
                <span style="margin-right: 24px;"><span style="font-weight: 600;">租金期数：</span>24期</span>
                <span style="margin-right: 24px;"><span style="font-weight: 600;">已缴费：</span>9期</span>
                <span style="margin-right: 24px;"><span style="font-weight: 600;">未缴费：</span>15期</span>
                <span style="margin-right: 24px;"><span style="font-weight: 600;">月租金：</span>1000元</span>
                <span style="margin-right: 24px;"><span style="font-weight: 600;">租金合计：</span>24000元</span>
                <span style="margin-right: 24px;"><span style="font-weight: 600;">已收租金：</span>9000元</span>
                <span style="margin-right: 24px;"><span style="font-weight: 600;">未收租金：</span>15000元</span>
            </div>
            <div style="margin: 18px 0;">
                <el-button type="primary">查看所有未缴费</el-button>
                <el-button type="primary">查看所有已缴费</el-button>
                <el-button type="primary">查看旧欠</el-button>
                <el-button type="primary">注销当欠</el-button>
                <el-button type="primary">预收退现</el-button>
                <el-button type="primary" @click="gotojflr">录入缴费信息</el-button>
                <span style="margin-left: 24px;"><span style="font-weight: 600;">实收金额：</span>3000元</span>
                <span style="margin-left: 24px;"><span style="font-weight: 600;">应收金额：</span>3000元</span>
            </div>
            <div>
                <el-table :data="tabledata" style="width: 100%" :header-cell-style="tableHeaderColor"
                    :row-style="tablerowColor" border size="mini">
                    <el-table-column prop="ysyf" label="应收月份" align="center"> </el-table-column>
                    <el-table-column prop="htbh" label="合同编号" align="center"></el-table-column>
                    <el-table-column prop="czf" label="承租方" align="center"> </el-table-column>
                    <el-table-column prop="kssj" label="开始时间" align="center"> </el-table-column>
                    <el-table-column prop="zzsj" label="终止时间" align="center"> </el-table-column>
                    <el-table-column prop="ysje" label="应收金额(月)" align="center"> </el-table-column>
                    <el-table-column prop="sfjf" label="是否缴费" align="center"> </el-table-column>
                    <el-table-column prop="ssje" label="实收金额" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.sfjf == '否' ? '--' : scope.row.ssje }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="jffs" label="缴费方式" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.sfjf == '否' ? '--' : scope.row.jffs }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="qz" label="欠租" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.sfjf == '否' ? '--' : scope.row.qz }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="skrq" label="收款日期" align="center">
                        <template slot-scope="scope">
                            {{ scope.row.sfjf == '否' ? '--' : scope.row.skrq }}
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    </div>
</template>
<script>
import { builddetail, stdwdetails, download } from '@/api/index';
export default {
    name: 'zjsj',
    data() {
        return {
            tabledata: [
                { ysyf: '2023-12-01', htbh: '0018', czf: '测试用户', kssj: '2023-10-01', zzsj: '2023-12-31', ysje: '1000', sfjf: '否', ssje: '', jffs: '', qz: '', skrq: '' },
                { ysyf: '2023-12-01', htbh: '0018', czf: '测试用户', kssj: '2023-10-01', zzsj: '2023-12-31', ysje: '1000', sfjf: '是', ssje: '1000', jffs: '现金', qz: '0', skrq: '2023-09-30' },
            ]
        };
    },
    methods: {
        //跳转缴费录入页面 
        gotojflr(){
            this.$router.push({
                name: 'jflradd',
                params: {id: "2"}            
            });
        },
        // 列表样式
        tableHeaderColor({ row, column, rowIndex, columnIndex }) {
            if (rowIndex === 0) {
                return 'background-color: #f7f7f7;color:black;height: 54px;font-weight: 500;font-size:14px;font-variant:tabular-nums'
            }
        },
        tablerowColor({ row, rowIndex }) {
            return 'height: 42px;font-size:14px;'
        },
        // 月份划分
        gettime(start, end, myzj, zzj, jkfs) {
            let ranges = []
            let xyzj = ''
            let xymyzj = ''
            let [i, j] = [start, end].map(i => new Date(i)).sort((a, b) => a - b)
            console.log([i, j])

            while (i <= j) {
                const startDate = i.toISOString().slice(0, 10)
                const xyfkfs = jkfs
                i = new Date(i.getFullYear(), i.getMonth() + 1, 0, i.getHours())
                const endDate = new Date(Math.min(+i, +j)).toISOString().slice(0, 10)
                const skrq = endDate
                i.setDate(i.getDate() + 1)
                if (zzj >= myzj) {
                    zzj = zzj - myzj
                    xymyzj = myzj
                } else {
                    xymyzj = ''
                }
                ranges.push({ startDate, endDate, xymyzj, xyfkfs, skrq })
            }
            console.log(ranges)
        }
    },
    created() {
        this.gettime('2021-01-01', '2022-12-31', 1000, 10000, '现金')
        console.log(this.$route.params)
    }
};
</script>
<style>
.el-upload-list {
    width: 60%;
}

.el-upload--text {
    width: 140px;
    height: 80px;
    overflow: hidden;
    border: none;
}
</style>
<style scoped>
.container {
    overflow: hidden;
}

.crumbs {
    background-color: #fff;
    padding: 20px 20px;
}

.indexTitle {
    margin-bottom: 20px;
}

.contentbox {
    display: flex;
    justify-content: space-between;
}

.contentsize {
    font-size: 18px;
    font-weight: 700;
    line-height: 32px;
    color: #606266;
}

.handle-box {
    overflow: hidden;
}

.addtitle {
    width: 100%;
    border-bottom: 1px solid #eeeeee;
    padding-bottom: 20px;
    box-sizing: border-box;
    /* margin-bottom: 20px; */
    font-weight: 700;
}

.buttonCenter {
    width: 12%;
    margin: auto;
}

.unloadTitle {
    text-align: left;
    padding-bottom: 10px;
    box-sizing: border-box;
    color: #606266;
}

/* 搜索按钮 */
.searchcolor {
    background-color: #7090ff;
}

.detailcontent {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.detailcontent .detailitem {
    /* float: left; */
    width: 33%;
    margin-bottom: 30px;
}

.detailcontent .detailitem1 {
    /* float: left; */
    width: 99%;
    margin-bottom: 30px;
    font-weight: 700;
    color: #008A94;
}

/* 项目文件 */
.filebox {
    text-align: center;
    margin-right: 10px;
    cursor: pointer;
}

.fileboxitem:hover {
    color: #7090ff;
}

.deleteitem {
    color: red;
}

.deleteitem:hover {
    color: #eeeeee;
}
</style>